import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:xlsk/api/model/class.dart';
import 'package:xlsk/components/tabs.dart';
import 'package:xlsk/routes/xlsk_router.dart';
import 'package:xlsk/utils/dimension.dart';

class ClassInfo extends StatefulWidget {
  var id;
  ClassInfo({this.id});

  @override
  State<StatefulWidget> createState() {
    return _classInfoState();
  }
}

class _classInfoState extends State<ClassInfo> {
  Map<String,dynamic> view = {
    "name":'',
    "kecheng":[{"id":'',"name":''}],
    "jiaoshi":'',
    "stu_count":0,
    "rongliang":0
  };
  List student = [];
  List paike = [];
  int current = 0;
  List takeName = [];

  @override
  void initState() {
    super.initState();
    getClassInfo();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("班级信息",style: TextStyle(color: Color(0xFF1F2329),fontSize: Dimension(context).toPx(17),fontWeight: FontWeight.bold)),
        leading: GestureDetector(
          child: Icon(Icons.arrow_back_ios,color: Color.fromRGBO(31, 35, 41, 1),size: 24),
          onTap: (){
            XlskRouter.back(context);
          },
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      body: Container(
        child: Column(
          children: [
            Container(
              color: Colors.white,
              padding: EdgeInsets.only(top: Dimension(context).toPx(24),bottom: Dimension(context).toPx(16),left: Dimension(context).toPx(32)),
              height: Dimension(context).toPx(150),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('${view['name']}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(18),fontWeight: FontWeight.w700)),
                  Row(
                    children: [
                      Container(
                        width: Dimension(context).toPx(63),
                        margin: EdgeInsets.only(right: Dimension(context).toPx(16)),
                        child: Text('关联课程',style: TextStyle(color: Color(0xff646a73),fontSize: Dimension(context).toPx(14))),
                      ),
                      Text('${view['kecheng'][0]['name']}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(14)))
                    ],
                  ),
                  Row(
                    children: [
                      Container(
                        width: Dimension(context).toPx(63),
                        margin: EdgeInsets.only(right: Dimension(context).toPx(16)),
                        child: Text('上课教室',style: TextStyle(color: Color(0xff646a73),fontSize: Dimension(context).toPx(14))),
                      ),
                      Text('${view['jiaoshi']}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(14)))
                    ],
                  ),
                  Row(
                    children: [
                      Container(
                        width: Dimension(context).toPx(63),
                        margin: EdgeInsets.only(right: Dimension(context).toPx(16)),
                        child: Text('人数/容量',style: TextStyle(color: Color(0xff646a73),fontSize: Dimension(context).toPx(14))),
                      ),
                      Text('${view['stu_count']}/${view['rongliang']}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(14)))
                    ],
                  ),
                ],
              ),
            ),
            Container(
              color: Colors.white,
              padding: EdgeInsets.only(bottom: Dimension(context).toPx(6)),
              child: Tabs(
                tabList: ['排课信息','班级学员','点名情况'],
                width: 375,
                current: current,
                canMove: true,
                callback: (idx){
                  setState(() {
                    current = idx;
                  });
                },
              ),
            ),
            Expanded(
              child: Container(
                color: Color(0xfff7f8fa),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Expanded(
                      child: ListView(
                        children: [
                          renderView()
                        ],
                      ),
                    )
                  ],
                )
              )
            )
          ],
        ),
      ),
    );
  }

  getClassInfo() async{
    Map<String,dynamic> data = {
      "id":widget.id
    };
    var result = await classApi().getClassInfo(context, data);
    var _takeName = await classApi().getTakeName(context, data);
    setState(() {
      view = result['view'];
      student = result['student'];
      paike = result['paike'];
      takeName = _takeName;
    });
  }

  renderView(){
    switch(current){
      case 0:
        return renderPaiker();
        break;
      case 1:
        return renderStudent();
        break;
      case 2:
        return renderCalendar();
        break;
    }
  }

  renderPaiker(){
    List<Widget> list = [];
    for(var item in paike){
      list.add(Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(12)))
        ),
        padding: EdgeInsets.all(Dimension(context).toPx(16)),
        margin: EdgeInsets.only(top: Dimension(context).toPx(16)),
        width: Dimension(context).toPx(343),
        height: Dimension(context).toPx(78),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('${item['kecheng']}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(16),fontWeight: FontWeight.w700)),
                  Text('${item['start_date']} ${item['timefrom']} - ${item['timeto']}')
                ],
              ),
            )
          ],
        ),
      ));
    }

    Widget view = Container(
      margin: EdgeInsets.only(bottom: Dimension(context).toPx(16)),
      child: Column(
        children: list,
      ),
    );

    return view;
  }

  renderStudent(){
    List<Widget> list = [];
    for(var item in student){
      list.add(Container(
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(12)))
        ),
        padding: EdgeInsets.all(Dimension(context).toPx(16)),
        margin: EdgeInsets.only(top: Dimension(context).toPx(16)),
        width: Dimension(context).toPx(343),
        height: Dimension(context).toPx(78),
        child: Row(
          children: [
            Container(
              width: Dimension(context).toPx(40),
              height: Dimension(context).toPx(40),
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage('${item['headimg']}'),
                  fit: BoxFit.cover
                ),
                borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(20)))
              ),
            ),
            Expanded(
              child: Container(
                margin: EdgeInsets.only(left: Dimension(context).toPx(16)),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('${item['stu_name']}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(14),fontWeight: FontWeight.w700)),
                    Text('剩余课时：${item['left_lession']}',style: TextStyle(color: Color(0xff646a73),fontSize: Dimension(context).toPx(12)))
                  ],
                ),
              ),
            )
          ],
        ),
      ));
    }
    Widget view = Container(
      margin: EdgeInsets.only(bottom: Dimension(context).toPx(16)),
      child: Column(
        children: list,
      ),
    );

    return view;
  }

  renderCalendar(){
    Widget view = Container(
      child: TableCalendar(
        firstDay: DateTime.utc(2020, 1, 1),
        lastDay: DateTime.utc(2050, 1, 1),
        focusedDay: DateTime.now(),
        locale: 'zh_CN',
        calendarStyle: CalendarStyle(
          todayDecoration: BoxDecoration(
            color: Colors.transparent,
          ),
          todayTextStyle: TextStyle(fontSize: Dimension(context).toPx(24))
        ),
        headerStyle: HeaderStyle(
          formatButtonVisible: false,
        ),
        daysOfWeekStyle: DaysOfWeekStyle(
          weekdayStyle: TextStyle(fontSize: Dimension(context).toPx(14),height: Dimension(context).toPx(1)),
          weekendStyle: TextStyle(fontSize: Dimension(context).toPx(14),height: Dimension(context).toPx(1))
        ),
        calendarBuilders: CalendarBuilders(
          todayBuilder: (context,day,_){
            return Center(
              child: Text('今天',style: TextStyle(fontSize: Dimension(context).toPx(18))),
            );
          },
          markerBuilder: (context,day,_){
            String time = '${day.year}-${day.month}-${day.day}';
            Widget view = Container();
            for(var i in takeName){
              List<String> ymd = i['start_date'].split('-');
              if(int.parse(ymd[0]) == day.year && int.parse(ymd[1])==day.month && int.parse(ymd[2])==day.day && int.parse(i['is_take']) == 1){
                // print('${int.parse(ymd[0])}-${int.parse(ymd[1])}-${int.parse(ymd[2])}');
                view = Container(
                  child: Stack(
                    children: [
                      Positioned(
                        bottom: 0,
                        left: Dimension(context).toPx(23.5),
                        child: Container(
                          width: Dimension(context).toPx(8),
                          height: Dimension(context).toPx(8),
                          decoration: BoxDecoration(
                              color: Color(0xffff4d4f),
                              borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(4)))
                          ),
                        ),
                      )
                    ],
                  ),
                );
              }
            }
            return view;
          },
        ),
      ),
    );

    return view;
  }
}
